<!--
    group: 发票管理
    name: 退票记录（退票详情）
    url: /invoice/refundTicketRecord
-->
<template>
  <div class="main_content">
    <h3><span class="icons"></span>发票信息</h3>
    <!--发票信息内容-->
    <div class="information_content" v-if="detailsData">
      <!-- 发票公共详情 kpzmbc_流水回单上传  kppzck_查看流水回单  ywsmsxz_查看业务说明书  bcclck_查看合同及补充材料  -->
      <InvoiceCommonDetails :vhas="['inr_inchjl:click:kpzmbc','inr_inchjl:click:kppzck','inr_inchjl:click:ywsmsxz','inr_inchjl:click:bcclck']" :detailsData="detailsData" :invoiceType="'退票'" />
      <detail-list title="作废/冲红信息" :col="1" class="detail-layout">
        <detail-list-item term="作废/冲红说明：">
          <span>{{ detailsData.returnRemark }}</span>
        </detail-list-item>
      </detail-list>
      <template v-if="detailsData.returnTaxList && detailsData.returnTaxList.length > 0">
        <detail-list title="  " v-for="item in detailsData.returnTaxList" :col="3" class="detail-layout">
          <detail-list-item term="发票代码：">{{ item.taxCode }}</detail-list-item>
          <detail-list-item term="发票号码：">{{ item.taxNumber }}</detail-list-item>
          <detail-list-item term="发票金额：">{{ item.taxMoney }}元</detail-list-item>
        </detail-list>
      </template>
      <a-divider />
    </div>

    <!-- 进度条 -->
    <h3><span class="icons"></span>退票进度</h3>
    <div class="information_footer">
      <!--
         步骤条状态   finish 完成   process 进行中   error 失败   wait 等待
         设置状态 setNodeStatus  0-未提交 1-完成 2-处理中 3-失败或拒绝
         操作方式 opDis  0-无 1-显示邀请核验接口 2-显示立即支付按钮 3-显示立即签署按钮
         退票节点类型 setNodeType 21-提交开票信息 22-订单审核 23-法人核验 24-渠道签约（总包渠道） 25-退票 27-待支付 26-已完成
      -->
      <a-steps labelPlacement="vertical">
        <a-step :key="'step-'+index" v-for="(jery,index) in progressList"
                :status="
                        jery.setNodeStatus == 1 ? 'finish' :
                        jery.setNodeStatus == 2 ? 'process' :
                        jery.setNodeStatus == 3 ? 'error' : 'wait'"
        >
          <template v-for="item in colorList">
            <a-icon  slot="icon"
                     :style="jery.setNodeStatus == item.key ? 'color:' + item.colorType : 'color: #999999'"
                     v-if="jery.setNodeStatus == item.key" :key="item.key"
                     :type="item.type" theme="filled" :two-tone-color="item.colorType" />
          </template>
          <template slot="title">
            <span
              :style="jery.setNodeStatus == 0 ? 'color:#999999' :
                       jery.setNodeStatus == 1 ? 'color:#4266E5' :
                       jery.setNodeStatus == 2 ? 'color:#FF9B46' :
                       jery.setNodeStatus == 3 ? 'color:#FF6A6A' : 'color: #999999' "
            >{{ jery.setNodeName }}</span>
          </template>
          <span slot="description">
            <a-button v-has="'inr_inchjl:click:yqhy'"
              v-if="jery.setNodeType == 23 && jery.opDis == 1"
              @click="invitation" class="line"
            >邀请核验</a-button>
<!--            <a-button v-if="jery.setNodeType == 24 && jery.opDis == 3" class="line" @click='goTo(detailsData.id)'>立即签署</a-button>-->
<!--              <a-button v-if="jery.setNodeType == 25 && jery.opDis == 2 && jery.setNodeStatus == 2" @click="paymentOther(detailsData.payOrder)" class="line">立即支付</a-button>-->
            <a-button v-has="'inr_inchjl:click:zf'"
              v-if="jery.setNodeType == 27 && jery.opDis == 2 && jery.setNodeStatus == 2"
              @click="paymentOther(detailsData.payOrder)" class="line"
            >立即支付</a-button>
            <span v-if="jery.setNodeType == 26 && jery.setNodeStatus == 1">如需退税，请点击右侧“联系客服”</span>
<!--            <span v-if="jery.setNodeStatus == 2">约2-3个工作日</span>-->
          </span>
        </a-step>
      </a-steps>
    </div>
    <!--退票进度  status 1 新开票 2 退票 3 退票-错票-->
    <div class="preview">
      <p v-if="detailsData.invoiceUrl">发票预览</p>
      <!--发票展示-->
      <div v-if="detailsData.invoiceUrl">
        <!--图片-->
        <div class="img_preview" v-if="isInvoiceType">
          <img :src="detailsData.invoiceUrl" alt="发票预览" :preview="0">
          <!--发票作废标识-->
          <a-button v-if="isInvoice" class="voidInvoice">发票作废</a-button>
        </div>
        <!--文件-->
        <div class="text_preview" v-if="!isInvoiceType">
          <span @click="invoiceDownload(detailsData.invoice)">
            <j-ellipsis :value="detailsData.invoice.length > 0 ? detailsData.invoice[0].fileName : ''" :length="20" style="cursor: pointer" />
          </span>
          <!--发票作废标识-->
          <a-button v-if="!isInvoice" class="voidText" type="link">发票作废</a-button>
        </div>
      </div>
    </div>
    <!--操作记录-->
    <div v-if="detailsData.id" style="width: 100%;margin-top: 30px;">
      <a-divider />
      <auditProcess :bizId="detailsData.id" :flowCode="flowCode"></auditProcess>
    </div>

    <!--邀请验证及二维码查看-->
    <InvitationCode
      :invitationShow="invitationShow"
      :inContent="detailsData"
      @handleCodeFather="handleCodeFather"
    />

    <!--邀请验证-->
<!--    <ModalCurrency :config="undoConfig" @fatherMethod="fatherMethod" />-->

  </div>
</template>

<script>
import {
  getTaxInvoiceDetails,
  calculatingPayExpenses,
  getInvoiceReturn,
  getInvoiceProgress,
  getConfirmDelivery,
  getTaxInvoiceCheckSendSms,
  getVerification,
  getTaxReturnTicketBatchCheck, findPayOrderRecord
} from '@/api/invoiceAdminister'
import { conversionElement,cloneObject,cutstr,percentConversion } from '@/utils/util'
import * as Utils from '@/utils/util'
import auditProcess from '@/views/common/auditProcess.vue'
import ModalCurrency from "@views/invoice/common/modalCurrency.vue";
import InvitationCode from '@views/invoice/verification/invitationCode.vue'
import DetailList from '@/components/tools/DetailList'
import InvoiceCommonDetails from '@views/invoice/modules/invoiceCommonDetails.vue'
const DetailListItem = DetailList.Item
export default {
  name: "refundTicketRecord",
  inject: ['reload'],
  components:{
    InvoiceCommonDetails,
    InvitationCode,
    DetailList,
    DetailListItem,
    ModalCurrency,
    auditProcess
  },
  data(){
    return{
      flowCode: '20000002',
      id: null,
      detailsData: {},

      //退票
      isVisable: false,   //退票展示标识
      typeSize: 0,  //1 图片
      isInvoice: false,  //退票作废展示
      isInvoiceType: true,   // 判断发票格式

      progressList: [],  //开票进度
      colorList:[
        {
          key:0,
          type:"question-circle",
          colorType:'#999999',
          verifyDesc:'未进行'
        },
        {
          key:2,
          type:"clock-circle",
          colorType:'#FF9B46',
          verifyDesc:'进行中'
        },
        {
          key:1,
          type:"check-circle",
          colorType:'#4266E5',
          verifyDesc:'完成'
        },
        {
          key:3,
          type:"close-circle",
          colorType:'#FF6A6A',
          verifyDesc:'失败'
        },
      ],

      // date:2023/12/27  变更作废原始核验
      undoConfig:{
        width: '500px',  //modal宽度
        visible: false,    //modal展示状态
        icon: '',
        iconColor: '',
        iconSize: '',
        modalTitle: '验证邀请',
        title: '发送成功！',     //标题
        subTitle: '',     //副标题
        content: '请提示法人收到短信后，及时完成验证！',  //内容
        okText: '',    //确定文字
        okType: '',    //确定类型
        cancleText: '确定',    //取消文字
        cancleType: 'primary',    //取消类型
        source: 1,    //来源   ''发送成功  1撤销并删除 2邀请验证 3确认寄送 4删除草稿
      },

      //邀请验证
      invitationShow: false,
      inContent: {},  //发票内容

    }
  },
  created() {
    if (this.$route.query.bizId){
      this.id = this.$route.query.bizId;
    }
  },
  mounted() {
    this.getListDetails(this.id);
  },
  methods:{
    //邀请核验
    invitation(){
      //邀请验证增加弹层
      this.$nextTick(()=>{
        this.invitationShow = true;
      });


      // let ids = [];
      // ids.push(this.id)
      // getTaxReturnTicketBatchCheck(ids).then(res => {
      //   if (res.success) {
      //     this.$nextTick(()=>{
      //       this.undoConfig.visible = true;
      //     })
      //     this.getListDetails(this.id);
      //   }else{
      //     this.$message.warning(res.message);
      //   }
      // })
    },
    //关闭邀请验证弹层
    handleCodeFather(){
      this.$nextTick(function(){
        this.invitationShow = false;
      })
      this.getListDetails(this.id);
    },
    //支付
    paymentOther(id){
      let arr = [];
      arr.push(id)

      let key = 'paymentInvoiceReturn'
      Utils.Storage.set(key,{ orderNo:arr })
      // console.log(Utils.Storage.get('paymentInvoice'))
      this.$router.push({
        path: '/myAccount/accountManage',
        query:{
          po:key
        }
      });
    },
    //立即签署
    goTo(bizId){
      this.$router.push({
        path: '/registerProcess/InvoiceDeclaration',
        query:{
          bizId:bizId
        }
      });
    },
    fatherMethod(config){
      //确定撤销
      this.$nextTick(()=>{
        this.undoConfig.visible = false;
      })
    },
    //查看详情
    getListDetails(id){
      getTaxInvoiceDetails(id).then(res => {
        if (res.success) {
          if (res.result){
            this.detailsData = res.result;
            let data = cloneObject(res.result);

            this.detailsData.amount = conversionElement(data.amount);
            this.detailsData.returnAmount = Math.abs(conversionElement(data.returnAmount));
            //处理开票内容
            for (const key in data.taxContents) {
              this.detailsData.taxContents[key].money = conversionElement(data.taxContents[key].money);
            }

            //处理退票信息
            if (data.returnTaxList && data.returnTaxList.length > 0){
              for (const key in data.returnTaxList) {
                this.detailsData.returnTaxList[key].taxMoney = conversionElement(data.returnTaxList[key].taxMoney);
              }
            }

            this.getListProgress(this.id);

            //处理发票预览
            if (data.invoiceUrl){
              if (data.invoiceUrl.includes('jpeg') || data.invoiceUrl.includes('png') || data.invoiceUrl.includes('jpg')){
                this.isInvoiceType = true;
                this.typeSize = 1;
              }else {
                this.isInvoiceType = false;
              }
            }
            //退票展示  开票进度 1 新开票 2 退票 3 错票重开
            this.typeSize == 1 ? this.isInvoice = true : this.isInvoice = false;

          }
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //开票进度条
    getListProgress(id){
      getInvoiceProgress(id).then(res => {
        if (res.success) {
          this.progressList = res.result || [];
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //截取长度
    cutstrLength(str, len){
      return cutstr(str, len);
    }
  }
}
</script>

<style scoped lang="less">
h3{
  font-weight: bolder;
}
.information_content{
  margin-bottom: 20px;
}

.information_footer{
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .ant-steps{
    width: 100%;
    box-sizing: border-box;
    padding: 20px 30px;
  }

}

.preview{
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  p{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 0;
    font-size: 16px;
    text-align: center;
    color: @color-black;
  }
  .img_preview{
    width: 600px;
    height: 300px;
    padding: 20px;
    margin-top: 15px;
    border: 1px dashed #4266E5;
    box-sizing: border-box;
    position: relative;
    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    //发票作废
    .voidInvoice{
      position: absolute;
      top: 40%;
      left: 30%;

      width: 260px;
      height: 70px;
      font-size: 40px;
      background: rgba(255,255,255,0);
      color: #FF0000;
      letter-spacing: 2px;
      //font-weight: bolder;
      border: 3px solid #ff0000;
      border-radius: 10px;
      transform: rotate(-15deg);
    }
  }
  p:last-child{
    margin-top: 20px;
  }
  .text_preview{
    width: 100%;
    margin-top: 15px;
    position: relative;
    //发票作废
    .voidText{
      color: #FF0000;
      margin-left: 20px;
    }
  }
}

</style>
